<template>
  <ul class="layer_kj" ref="layerParent">
    <li
      :class="
        key === config.currentIndex
          ? 'clearfix layer_active layer-' + key
          : 'clearfix layer-' + key
      "
      v-for="(value, key) in config.config"
      :key="key"
      @click="layerClickHandle(key)"
    >
      <img :src="value.other.icon" />
      <span class="layer_name">{{ value.other.name }}</span>
    </li>
  </ul>
</template>

<script lang="ts" setup>
import { useConfig } from "@/stores/datav/useConfig";
import { IConfigStore } from "@/stores/datav/types";
import { ref, watch } from "vue";

const config: IConfigStore = useConfig();
const layerParent = ref<HTMLDivElement | null>(null);
const layerClickHandle = (id: string) => {
  config.currentIndex = id;
};
watch(
  () => config.currentIndex,
  (nv) => {
    const layerItemDom: HTMLDivElement | null = (
      layerParent.value as HTMLDivElement
    ).querySelector(".layer-" + nv);
    if (layerItemDom) {
      (layerItemDom as HTMLDivElement).scrollIntoView();
    }
  }
);
</script>

<style lang="less" scoped>
.layer_kj > li {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  text-align: center;
  border-bottom: 1px solid @black;
  /* background-color: #2d3035; */
  cursor: pointer;
}

.layer_kj > li > img {
  height: 36px;
  width: 50px;
}

.layer_kj > li > span {
  font-size: 14px;
  vertical-align: middle;
  color: #fff;
  line-height: 32px;
  text-align: left;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.layer_name {
  width: 82px;
  float: left;
  padding-left: 10px;
}

.layer_kj .layer_active {
  background-color: fade(@primary-color, 50%);
}
</style>
